<template>
    <div class="menu-container">
        <el-menu
            default-active="goods"
            background-color="#1cc7d0"
            text-color="#000"
            active-text-color="#f5df2e"
            :collapse="is_collapse"
            @select="handle_select"
        >
            <el-submenu
                v-for="item in allow_routes"
                :key="item.path"
                :index="item.path"
                v-if="item.meta.icon"
            >
                <template #title>
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{ item.meta.title }}</span>
                </template>
                <el-menu-item
                    v-for="child in item.children"
                    v-if="child.meta.icon"
                    :key="child.name"
                    :index="child.name"
                >
                    <i :class="child.meta.icon"></i>
                    {{ child.meta.title }}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex"

export default {
    computed: {
        ...mapState("nav", ["is_collapse"]),
        ...mapGetters("user", ["allow_routes"])
    },
    methods: {
        handle_select(name) {
            if (this.$route.name !== name) {
                this.$router.push({ name })
            }
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.menu-container {
    height: 100vh;
    background-color: #1cc7d0;
    i {
        color: #3369e7 !important;
    }
    .el-menu-item.is-active{
        background-color: #169fa6!important;
        i {
            color: #f5df2e!important;
        }
    }
}
</style>
